<template>
  <div>
    <div class="red">
      <van-row type="flex" justify="space-between" align="middle">
        <van-col
          >有<span>{{ this.data.length }}</span
          >个红包即将到期</van-col
        >
        <van-col>
          <span class="blue"><van-icon name="question" />红包说明</span>
        </van-col>
      </van-row>
      <coupon
        v-for="(item, index) in data"
        :key="index"
        :data="item"
        class="packet"
      />
      <div class="text">
        限品类：快餐便当、特色菜系、小吃夜宵、甜品饮品、异国料理
      </div>
      <div class="past-records" @click="showPopup">查看历史红包 ></div>
      <!-- 历史红包 -->
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '100%' }"
        closeable
        close-icon="arrow-left"
        close-icon-position="top-left"
        class="history"
      >
        <div class="headline"><h3>历史红包</h3></div>
        <div class="History-red-envelope">
          <hb-history
            v-for="(item, index) in history"
            :key="index"
            :data="item"
          />
        </div>
      </van-popup>
    </div>
    <div class="hongbao_footer">
      <van-button type="default" class="hongbao_style" @click="conversionPopup">
        兑换红包
      </van-button>
      <van-popup
        v-model="conversion"
        position="bottom"
        :style="{ height: '100%' }"
        closeable
        close-icon="arrow-left"
        close-icon-position="top-left"
        class="conversion"
      >
        <div class="headline"><h3>兑换红包</h3></div>
        <van-form @submit="onSubmit" class="menu">
          <van-field
            autocomplete="off"
            v-model="exchange_code"
            name="兑换码"
            placeholder="请输入兑换码"
            class="cdkey"
          />
          <div class="input_container">
            <van-field
              width="50px"
              autocomplete="off"
              maxlength="4"
              v-model="captcha_code"
              name="验证码"
              placeholder="验证码"
              class="verification"
            />
            <div class="img_change_img">
              <img :src="Img" />
              <div class="change_img" @click="getCode">
                <p>看不清</p>
                <p>换一张</p>
              </div>
            </div>
          </div>
          <div style="margin: 16px">
            <van-button
              block
              type="primary"
              :color="btcolor"
              native-type="submit"
              :disabled="forbidden"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-popup>
      <van-button type="default" class="hongbao_style" @click="recommendedPopup"
        >推荐有奖</van-button
      >
      <van-popup
        v-model="recommended"
        position="bottom"
        :style="{ height: '100%' }"
        closeable
        close-icon="arrow-left"
        close-icon-position="top-left"
        class="recommended"
      >
        <div class="headline"><h3>推荐有奖</h3></div>
        <img src="~@/images/activity.png" style="width: 100%" />
        <div class="fenxiang">
          <div>
            <img src="~@/images/weixin.png" />
            <p>邀请微信好友</p>
          </div>
          <div>
            <img src="~@/images/qq.png" />
            <p>邀请QQ好友</p>
          </div>
          <div>
            <img src="~@/images/fenxiang.png" />
            <p>面对面邀请</p>
          </div>
        </div>
        <div class="leiji">
          <div>
            <p>累计收益</p>
            <p>
              <span style="font-size: 25px; font-weight: 700; color: red"
                >0</span
              >元
            </p>
          </div>
          <div>
            <p>成功邀请</p>
            <p><span style="font-size: 25px; font-weight: 700">0</span>人</p>
          </div>
        </div>
        <div class="shouyi">
          <div>-收益明细-</div>
          <div>
            <img
              src="~@/images/qianbao.png"
              style="width: 30px; height: 37px"
            />
            <div style="font-size: 10px; color: '#d2d2d2'">
              还不赶紧去邀请好友
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import coupon from './coupon.vue'
import hbHistory from './hbHistory.vue'
import { getCode } from '@/api/login'
import { conversion, envelopes, Expired } from '@/api/profile'
import { mapState } from 'vuex'
export default {
  name: 'redpacket',
  components: {
    coupon,
    hbHistory,
  },
  computed: {
    ...mapState(['userInfo']),
  },
  data() {
    return {
      show: false,
      conversion: false,
      recommended: false,
      exchange_code: '',
      captcha_code: '',
      forbidden: true,
      btcolor: '#ccc',
      Img: '',
      data: [],
      history: [],
    }
  },
  watch: {
    exchange_code: {
      handler() {
        if (this.exchange_code.length > 0 && this.captcha_code.length >= 4) {
          this.forbidden = false
          this.btcolor = ''
        } else {
          this.forbidden = true
          this.btcolor = '#ccc'
        }
      },
      deep: true,
    },
    captcha_code: {
      handler() {
        if (this.exchange_code.length > 0 && this.captcha_code.length >= 4) {
          this.forbidden = false
          this.btcolor = ''
        } else {
          this.forbidden = true
          this.btcolor = '#ccc'
        }
      },
      deep: true,
    },
  },
  created() {
    this.getCode()
    this.envelopes()
    this.Expired()
  },

  methods: {
    showPopup() {
      this.show = true
    },
    conversionPopup() {
      this.conversion = true
    },
    recommendedPopup() {
      this.recommended = true
    },
    async onSubmit() {
      let res = {
        exchange_code: this.exchange_code,
        captcha_code: this.captcha_code,
        user_id: this.userInfo.user_id,
      }
      const { data } = await conversion(res)
      if (data.type === 'NOT_ALLOWD_API') {
        this.$toast(data.message)
      }
      this.getCode()
    },
    async getCode() {
      const { data } = await getCode()
      this.Img = data.code
    },
    async envelopes() {
      const { data } = await envelopes(this.userInfo.user_id)
      this.data = data
    },
    async Expired() {
      const { data } = await Expired(this.userInfo.user_id)
      this.history = data
    },
  },
}
</script>

<style scoped lang='less'>
.red {
  span {
    color: #ff5340;
  }
  .blue {
    color: #3190e8;
  }
  padding: 10px 20px;
  .history {
    * {
      margin: 0;
      padding: 0;
    }
    background-color: #f1f1f1;
    /deep/.van-icon-arrow-left:before {
      color: #ffffff !important;
    }
    .headline {
      background-color: #3190e8;
      height: 50px;
      width: 100%;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
    .History-red-envelope {
      padding: 0 10px;
      .packet {
        color: #ccc;
      }
    }
  }
  .text {
    font-size: 0.7rem;
    color: #666;
    padding: 10px;
  }
  .past-records {
    font-size: 0.7rem;
    color: #666;
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
}
.hongbao_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  .hongbao_style {
    font-size: 0.7rem;
    flex: 1;
  }
  .recommended {
    * {
      padding: 0;
      margin: 0;
    }
    background-color: #f1f1f1;
    /deep/.van-icon-arrow-left:before {
      color: #ffffff !important;
    }
    .headline {
      background-color: #3190e8;
      height: 50px;
      width: 100%;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
    .fenxiang {
      background-color: #fff;
      padding: 30px 0;
      display: flex;
      justify-content: space-around;
      div {
        text-align: center;
        p {
          font-size: 10px;
        }
        img {
          width: 59px;
          height: 59px;
        }
      }
    }
    .leiji {
      padding-top: 20px;
      display: flex;
      div {
        text-align: center;
        flex: 1;
      }
      div:nth-last-child(2) {
        border-right: 1px dashed #dddddd;
      }
    }
    .shouyi {
      text-align: center;
      div {
        margin-top: 10px;
      }
    }
  }
  .conversion {
    * {
      padding: 0;
      margin: 0;
    }
    background-color: #f1f1f1;
    /deep/.van-icon-arrow-left:before {
      color: #ffffff !important;
    }
    .headline {
      background-color: #3190e8;
      height: 50px;
      width: 100%;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
    .menu {
      .input_container {
        display: flex;
        flex-wrap: nowrap;
        .img_change_img {
          width: 45%;
          background-color: #fff;
          margin-left: 10px;
          display: flex;
          img {
            flex: 1;
            margin: 5px;
          }
          .change_img {
            p {
              margin: 5px;
              flex: 1;
              font-size: 5px;
            }
            p:nth-of-type(2) {
              color: blue;
            }
          }
        }
      }
      padding: 0 20px;
      .cdkey {
        border-radius: 4px;
        padding-left: 10px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        margin: 10px 0;
      }
      .verification {
        border-radius: 4px;
        padding-left: 10px;
        width: 55%;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
      }
    }
  }
}
</style>